

<script>
  $(document).ready(function () {
    console.log("indexSpotList.html载入时！");
    spotList();
  });

  //向服务器端发送ajax请求
  function spotList() {
    $.ajax({
      type: "POST",
      dataType: "json",
      data:{"method":"showSpot"},
      url:"./spotController",
      success:function (data) {
        outSpot (data);
      }
    });
    return false;

  }

  //输出景点列表
  function outSpot(data) {
    var result = "<div class=\"item-box\" >";

    console.log(data);
    for(var i = 0;i<data.length;i++){
        console.log("图片地址："+data[i].spotImgUrl);
      var indx = i+1;
      if(indx%4!=0){
        result+="<div class=\"item\">\n" +
                "<a href='./spotDetail.jsp?spotId="+data[i].spotId+"'>" +
                "<img src='./"+data[i].spotImgUrl+"'></a>\n" +
                "                      <div class=\"title\">"+data[i].spotName+"</div>\n" +
                "                      <div class=\"price\">\n" +
                "                        <span>￥"+data[i].spotPrice+"</span>\n" +
                "                        \n" +
                "                      </div>\n" +
                "                    </div>";
      }else {
        result+="<div class=\"item\">\n" +
                "<a href='./spotDetail.jsp?spotId="+data[i].spotId+"'>"  +
                "<img src='./"+data[i].spotImgUrl+"'></a>\n" +
                "                      <div class=\"title\">"+data[i].spotName+"</div>\n" +
                "                      <div class=\"price\">\n" +
                "                        <span>￥"+data[i].spotPrice+"</span>\n" +
                "                        \n" +
                "                      </div>\n" +
                "                    </div>";
        result+="</div>"
        if(indx==data.length){
          result+="</div>";
        }else {
          result+= "<div class=\"item-box\" >";
        }

      }
    }
    $("#firstItem").html(result+"</div>");
    console.log(result+"</div>");
  }

</script>
<style>
  #list-cont{
    padding-bottom: 10%;
  }
</style>

<div id="list-cont">
    <!--必玩景点开始-->
    <div class="content">
      <div class="floors">
        <div class="sk">
          <div class="sk_inner w1200">
            <div class="sk_hd">
              <a href="javascript:;">
                <img src="./resources/lib/layui/images/s_img1.jpg">
              </a>
            </div>
            <div class="sk_bd">
              <div class="layui-carousel" id="test1">
                <div carousel-item id="firstItem">
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
    </div>
</div>
<div style="clear: both;"></div>
    <!--必玩景点结束-->

  <!--勿删，影响该页面展示-->
<script type="text/javascript">
    layui.config({
        base: './resources/lib/layui/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
      }).use(['mm','carousel'],function(){
          var carousel = layui.carousel,
         mm = layui.mm;
         var option = {
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always'
            ,height:'298'
          }
          carousel.render(option);


    });
  </script>
